<!--
 * @Author: Redbin
 * @Date: 2022-04-08 11:33:14
 * @LastEditTime: 2022-04-19 14:24:39
 * @LastEditors: Redbin
 * @Description: 
 * @FilePath: /wisdom-website/components/CardTitle.vue
 * 以诗的格调出场，才对的起你流光溢彩的眼眸
-->
<template>
  <div class="flex flex-col items-center">
    <div class="title-less uppercase" :class="lessClass" :style="lessStyle">
      {{ lessTitle }}
    </div>
    <div class="card-title-main" :class="['-mt-4', 'md:' + titleClass]">
      {{ title }}
    </div>
    <div class="card-title-bar" :class="barClass"></div>
  </div>
</template>

<script>
export default {
  props: {
    lessTitle: {
      type: String,
      default: '',
    },
    lessStyle: {
      type: Object,
      default: () => ({
        background: 'linear-gradient(360deg, #FBFBFB 0%, #EFEFEF 100%)',
      }),
    },
    lessClass: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    titleClass: {
      type: String,
      default: 'md:-mt-10',
    },
    barClass: {
      type: String,
      default: 'mt-4',
    },
  },
}
</script>

<style scoped>
.title-less {
  font-weight: 500;
  color: #9d9d9d;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  @apply text-3xl md:text-6xl;
}
</style>
